<template>
  <div class="the-fast-box">
    <div class="title" v-if="pos=='1'">
      <span>综合实力</span>
      <img src="/images/wuli/right/综合实力-on.png">
    </div>
    <div class="title" v-if="pos=='2'">
      <div v-for="(item,index) in titles" :key="item" class="titles" @click="handleTitle(index)">
        <span style="width:88.8px">{{item}}</span>
        <img v-if="now_title==index" src="/images/wuli/right/5个按钮-on.png" style="width:88.8px;">
        <img v-else src="/images/wuli/right/5个按钮-off.png" style="width:88.8px;">
      </div>
    </div>
    <div v-show="!isOk" class="no_data">正在加载，请稍等...</div>

    <div v-show="isOk" class="gs-lists content"  @mouseenter="enter" @mouseleave="leave">
    <!-- basic3 会把id传出来 -->
      <!-- <basic3 v-for="(item,index) in current_info" :key="index" :detail="item" :index="index+1"></basic3> -->
      <basic3 v-for="(item,index) in info" :key="index" :detail="item" :index="index+1"></basic3>
    </div>
  </div>
</template>

<script>
import basic3 from './basic3.vue'

export default {
  name: '',
  components: {
    basic3
  },
  props: {
    pos: {
      type: [Number, String],
      required: true
    },
    field: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      titles: ['基础实力','市场拓展','产品创新', '社会影响', '风险控制'],
      normGuids: ['76b57e08-a60b-4d50-87e7-f00fe21f6e5c',
        '1296b6c1-3bd2-4dac-8aae-661dbc2360f9',
        'f68e1dc4-bff6-4139-9f77-0a2bc8806a3f',
        '8d323d5f-abcd-4bc1-9548-4702e7520f1d',
        '305f9c19-20e5-4b04-b90b-b8fa68517ebc'],
      now_title: 0,
      initInterval: null,
      info: [],
      current_info: [],
      total: 0,
      countOfRender: 0,
      n: 0,
      isOk: false
    }
  },
  computed: {},
  watch: {
    field: function (){
      console.log('right的field更新为 ', this.field)
      if(this.pos=='1'){
        // 默认：综合实力
        this.getRight('a1ed3f6f-c358-47fc-9339-ecbc5730ab51')
      } else {
        // 默认：基础实力
        this.getRight(this.normGuids[0])
      }
    },    
    location: function (){
      console.log('right的location更新为 ',this.location)
      if(this.pos=='1'){
        // 默认：综合实力
        this.getRight('a1ed3f6f-c358-47fc-9339-ecbc5730ab51')
      } else {
        // 默认：基础实力
        this.getRight(this.normGuids[0])
      }
    }
  },
  activated(){
    console.log(this.titles[this.now_title],'activated')

    let parentDoms = document.getElementsByClassName('content') //获取滚动元素
    let parentDom = parentDoms[this.pos-1]
    parentDom.scrollTop = 0
  },
  deactivated(){
    console.log(this.titles[this.now_title],'deactivated')
    this.enter()
  },
  created () {},
  mounted () {
    if(this.pos=='1'){
      // 默认：综合实力
      this.getRight('a1ed3f6f-c358-47fc-9339-ecbc5730ab51')
    } else {
      // 默认：基础实力
      this.getRight(this.normGuids[0])
    }
  },
  methods: { 
    async getRight(normGuid){
      var parentDoms = document.getElementsByClassName('content') //获取滚动元素
      let parentDom = parentDoms[this.pos-1]
      parentDom.scrollTop = 0
      this.isOk = false

      const url = '/dcockpit/rest/cockpitApi/searchListNormResult'
      let x
      if(this.location=='浙江省'){
        x = await this.$api.post(url,{
          "normGuid": normGuid,
          "fieldList": [{"key":"mapping_name","value":this.field},{"key":"province_code","value":"330000"}]
        })
      }else if(this.location=='宁波市'){
        x = await this.$api.post(url,{
          "normGuid": normGuid,
          "fieldList": [{"key":"mapping_name","value":this.field},{"key":"city_code","value":"330200"}]
        })
      }else{
        x = await this.$api.post(url,{
          "normGuid": normGuid,
          "fieldList": [{"key":"mapping_name","value":this.field}]
        })
      }
      // console.log(x)
      if(x.status.code!='1'){
        alert('右侧数据获取失败')
        return
      } 
      let {custom:{result}}={...x}
      this.total = result.cockpitData.length
      // console.log(this.pos,this.total,'--- total length ----')
      // this.info = result.cockpitData

      this.info = result.cockpitData.splice(0,200)
      // this.info = result.cockpitData.splice(1,10)
      // console.log(this.info)
      this.isOk = true
      
      setTimeout(() => {
        // this.enter()
        this.autoScroll(100)
      },1500)

      // this.current_info = []
      // this.countOfRender = 0
      // this.n = 0

      // this.enter()
      // this.loop()
      // this.leave()
      // console.log(this.pos,this.info,'--------')
    },
    // loop (){
    //   // current_info
    //   requestAnimationFrame(()=>{
    //     // console.log('当前loop ',this.n++)
    //     // 每次只渲染 20 条数据
    //     const temp = []
    //     for (let i = 0; i < 60; i++) {
    //       // 当DOM渲染完就退出
    //       if (this.countOfRender >= this.total) return
    //       // if (this.countOfRender >= 40) return
    //       temp.push(this.info[this.countOfRender])
    //       this.countOfRender += 1
    //     }
    //     this.current_info = this.current_info.concat(temp)
    //     this.loop()
    //   })
    // },
    handleTitle(index){
      this.now_title = index
      this.info = []
      // clearInterval(this.initInterval)
      this.enter()
      this.initInterval = null
      try {
        this.getRight(this.normGuids[index])
      } catch (error) {
        alert(error)
        console.log(error)
      }
      // this.getRight(this.normGuids[index])
      // var parentDoms = document.getElementsByClassName('content') //获取滚动元素
      // let parentDom = parentDoms[this.pos-1]
      // parentDom.scrollTop = 0
      // console.log(this.titles[index])
      // this.$emit('getTitle',index)
    },
    autoScroll(interval) {
      var parentDoms = document.getElementsByClassName('content') //获取滚动元素
      let parentDom = parentDoms[this.pos-1]
      // console.log(parentDom.scrollTop, parentDom.clientHeight, parentDom.scrollHeight)
      this.enter()
      this.initInterval = setInterval(() => {
        // 判断元素是否滚动到底部(距离顶部 + 可视高度 = 整个高度)
        // 滚上去了多少 + client里的高度 >= 总高度
        if (parentDom.scrollTop + parentDom.clientHeight >= parentDom.scrollHeight) {
          parentDom.scrollTop = 0
        } else {
          parentDom.scrollTop += 2 // 元素自增距离顶部
        }
      }, interval)

    },
    enter(){
      if (this.initInterval) {
        
        clearInterval(this.initInterval);
        this.initInterval = null;
        console.log('定时器消除成功',this.initInterval)
      }
    },
    leave(){
      if (this.initInterval) {
        return 
      }
      // this.autoScroll(100)
      this.throttle(this.autoScroll(100))
    },
    throttle(fn, delay=200) {
      let timer = null
      return function (...args) {
        if (!timer) {
          timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null
          }, delay)
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.the-fast-box {
  margin-bottom: 40px;

  .title {
    position relative;
    height: 44px;
    border-bottom: 1px solid rgba(0, 216, 255, 1);
    width: 444px;
    img {
      z-index: -1;
      position absolute;
      top: 0;
      left: 0;
      width: 168px;
      height: 44px;
    }
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 44px;
      height: 44px;
      width: 168px;
      color: #FFFFFF;
      font-weight: 400;
      text-align: center;
    }
  }
  .titles {
    border: 0;
    display: inline-block;
    position relative;
    cursor: pointer;
  }
  .gs-lists {
    box-sizing: border-box;
    width: 100%;
    height: 325px;
    padding-left: 57px;
    overflow-y: auto;
    overflow-x: hidden;

  }
  .gs-lists::-webkit-scrollbar {
    display: none;
  }
}
.click-style {
  background-image: url('/images/wuli/选中底.png');
  background-size: 100%;
}
.no_data {
  color: #fff;
  height: 325px;
  width: 100%;
  text-align: center;
  line-height: 300px;
  letter-spacing: 3px;
  opacity: 0.8;
}
</style>
